<template>
  <div>
     <div style="cursor: pointer; line-height: 30px;" @click="$router.go(-1)"><i class="el-icon-back"></i>返回</div>
    <el-card>
      <div>
         <el-row>
           <el-col>
             <span style="font-weight: bold;font-size: 18px; line-height: 40px;">{{basicinfo.title}}</span>
           </el-col>
           <el-col :span="6">
             <span>班级容量:{{basicinfo.capacity}}</span>
           </el-col>
           <el-col :span="6">
             <span>关联课程:<span v-for="(item,index) in basicinfo.courses" :key="index"> {{item.title}} </span></span>
           </el-col>
           <el-col :span="6">
             <span>授课教师:<span v-for="(item,index) in basicinfo.teachers" :key="index"> {{item.name}} </span></span>
           </el-col>
           <el-col :span="6">
             <span>班级容量:{{basicinfo.capacity}}</span>
           </el-col>
         </el-row>
      </div>
    </el-card>
    <div style="height: 10px;"></div>
    <el-card>
      <el-tabs v-model="activetab" name="funcs">
        <el-tab-pane label="排课信息" name="timetable">排课信息</el-tab-pane>
        <el-tab-pane label="班级学员" name="orders">
          <div>
            <el-button type="primary" size="mini">添加学员</el-button>
            <el-button size="mini">导出班级学员</el-button>
          </div>
          <div style="margin-top: 10px;">
            <el-table border :data="students">
              <el-table-column label="" type="selection"></el-table-column>
              <el-table-column label="姓名" prop="name" width="140px"></el-table-column>
              <el-table-column label="手机号" prop="mobile" width="180px"></el-table-column>
              <el-table-column label="消课课程" prop="course"></el-table-column>
                <el-table-column label="剩余课时/天数" prop="remain"></el-table-column>
                <el-table-column label="操作" width="180px">
                  <template v-slot="scope">
                    <el-button type="text">调至其他班</el-button>
                    <el-button type="text">移出此班</el-button>
                  </template>
                </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="上课记录" name="record">上课记录</el-tab-pane>
        <el-tab-pane label="班级课表" name="classtimetable">班级课表</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        classid:-1,
        basicinfo:{
          title:''
        },
        students:[
          {id:1,name:"张三"}
        ],
        activetab:"timetable"
      }
    },
    mounted(){
        this.classid=this.$route.query.classid;
        this.loadData();
    },
    methods:{
      loadData(){
          const params={
            classid:this.classid
          };
          this.api_helper.post("api/admin/educational/classname/detail",params).then(res=>{
                if(res.status==200 && res.data.code==1){
                    this.basicinfo=res.data.data;
                }
            })
      }
    }
  }
</script>

<style>
</style>
